import {
  createEffect,
  createMemo,
  createSignal,
  on,
  type ParentComponent,
  splitProps,
} from "solid-js";
import type { BackdropProps } from "./types";

const Backdrop: ParentComponent<BackdropProps> = (p) => {
  const [local] = splitProps(p, ["children", "onRef", "show"]);

  const [_show, _setShow] = createSignal(false);

  const show = createMemo(() => {
    if (local.show) {
      return local.show;
    }

    return _show();
  });

  const classList = createMemo(() => {
    return {
      show: show(),
    };
  });

  const instance = createMemo(() => {
    return {
      show: () => _setShow(true),
      hide: () => _setShow(false),
    };
  });

  createEffect(on(instance, (v) => local.onRef?.(v)));

  return (
    <span>
      <div class="modal-backdrop fade" classList={classList()}></div>
      {local.children}
    </span>
  );
};

export default Backdrop;
